const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader")
const config =  {
    entry:path.resolve(__dirname,'src/main.js'),  //入口文件
    output:{  //出口文件
        path:path.resolve(__dirname,'dist'),
        filename:'[hash]-[name]-bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.vue$/,
                loader:"vue-loader"
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"webpack-vue",
            //页面路径
            template:path.resolve(__dirname,"public/index.html")
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
    ],
    devtool: 'inline-source-map',
    devServer:{
        contentBase:"./dist",
        // 主地址
        // host:
        //端口
        // port:8000,

        // 报错在页面上
        overlay:{
            errors:true
        }
    },
    mode:'development'  //模式
}
module.exports = config;